<template>
    <div class="qilin-QilinSearch">
        <el-form
            ref="formData"
            inline
            :model="ownSearchConfig.submitData"
            :label-position="ownSearchConfig?.elFormConfig?.labelPosition || 'right' "
            :label-suffix="ownSearchConfig?.elFormConfig?.labelSuffix || ':' "
            :size="ownSearchConfig?.elFormConfig?.size || 'default' "
            :class="ownSearchConfig?.elFormConfig?.className"
        >
            <template
                v-for="(item,index) in ownSearchConfig.itemConfig"
                :key="item.dataName || 'form-search-key-'+index "
            >
                <el-form-item
                    v-if="!item.isHide"
                    :label="item.labelName || (!item.hideLabel ? '默认名称'+index : '' ) "
                    :prop="item.dataName"
                    :class="[
                        item.className
                    ]"
                >
                    <template v-if="item.type === 'input' || !item.type ">
                        <el-input
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :type="item.inputType || 'text' "
                            :clearable="item.clearable || true "
                            :disabled="item.disabled || false "
                            :placeholder="item.placeholder || '请输入'+item.labelName "
                            :prefix-icon="item.prefixIcon"
                            :suffix-icon="item.suffixIcon"
                            :style="`width:${item.width ? item.width : 150}px;`"
                            v-bind="item"
                        >
                            <template v-slot:prefix>
                                <slot :name="item.prefixSlotName"></slot>
                            </template>
                            <template v-slot:suffix>
                                <slot :name="item.suffixSlotName"></slot>
                            </template>
                        </el-input>
                    </template>
                    <template v-else-if="item.type === 'select' ">
                        <el-select
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :clearable="item.clearable || true "
                            :disabled="item.disabled || false "
                            :multiple="item.multiple || false "
                            :collapse-tags="item.collapseTags || false"
                            :filterable="item.filterable || true "
                            :style="`width:${item.width ? item.width : 150}px;`"
                            v-bind="item"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                        >
                            <el-option
                                v-for="optItem in ownSearchConfig.selectLists[item.dataListName]"
                                :key="optItem.value"
                                :disabled="optItem.disabled || false "
                                :label="optItem.label"
                                :value="optItem.value"
                            ></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="item.type === 'date' ">
                        <el-date-picker
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            v-bind="item"
                            :type="item.dateType || 'date' "
                            :placeholder="
                                !item.dateType.includes('range') ? (item.placeholder || '请选择'+item.labelName) : ''
                            "
                            :start-placeholder="
                                item.dateType.includes('range') ? item.startPlaceholder || '开始时间' : ''
                            "
                            :end-placeholder="
                                item.dateType.includes('range') ? item.endPlaceholder || '结束时间' : ''
                            "
                            :format="item.format || 'YYYY-MM-DD HH:mm:ss' "
                            :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss' "
                            :range-separator="item.rangeSeparator || '至' "
                            :disabled-date="(date)=>{
                                return item.disabledDate && item.disabledDate(item,date);
                            }"
                            :default-time="
                                item.defaultTime ||
                                (item.dateType.includes('range') ? [new Date(2000,1,1,8,30,0),new Date(2000,1,1,17,30,0)] : new Date(2000,1,1,8,30,0))
                            "
                            :style="`width:${item.width ? item.width : 280}px;`"
                            @calendar-change="(val)=>{
                                synchronous('calendarchange',item,val);
                            }"
                            @change="(val)=>{
                                synchronous('change',item,val);
                            }"
                        ></el-date-picker>
                    </template>
                    <template v-else-if="item.type === 'cascader' ">
                        <el-cascader
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :options="ownSearchConfig.selectLists[item.dataListName] || [] "
                            :props="item.cascaderProps"
                            :style="`width:${item.width ? item.width : 180}px;`"
                            v-bind="item"
                        >
                        </el-cascader>
                    </template>
                    <template v-else-if="item.type === 'slot' ">
                        <slot :name="item.slotName" :data="{item}"></slot>
                    </template>
                </el-form-item>
            </template>
            <template v-if="ownSearchConfig.moreConfig?.isShowMore">
                <div class="qilin-QilinSearch-more">
                    <span v-if="!showMore" @click="showMore=true">展开<el-icon><ArrowDownBold /></el-icon></span>
                    <span v-else @click="showMore=false">收起<el-icon><ArrowUpBold /></el-icon></span>
                </div>
                <el-collapse-transition>
                    <div class="qilin-QilinSearch-more-form" v-show="showMore">
                        <template
                            v-for="(item,index) in ownSearchConfig.moreItemConfig"
                            :key="item.dataName || 'form-more-search-key-'+index "
                        >
                            <el-form-item
                                v-if="!item.isHide"
                                :label="item.labelName || (!item.hideLabel ? '默认名称'+index : '' ) "
                                :prop="item.dataName"
                                :class="[
                                    item.className
                                ]"
                            >
                                <template v-if="item.type === 'input' || !item.type ">
                                    <el-input
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :type="item.inputType || 'text' "
                                        :clearable="item.clearable || true "
                                        :disabled="item.disabled || false "
                                        :placeholder="item.placeholder || '请输入'+item.labelName "
                                        :prefix-icon="item.prefixIcon"
                                        :suffix-icon="item.suffixIcon"
                                        :style="`width:${item.width ? item.width : 150}px;`"
                                        v-bind="item"
                                    >
                                        <template v-slot:prefix>
                                            <slot :name="item.prefixSlotName"></slot>
                                        </template>
                                        <template v-slot:suffix>
                                            <slot :name="item.suffixSlotName"></slot>
                                        </template>
                                    </el-input>
                                </template>
                                <template v-else-if="item.type === 'select' ">
                                    <el-select
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :placeholder="item.placeholder || '请选择'+item.labelName "
                                        :clearable="item.clearable || true "
                                        :disabled="item.disabled || false "
                                        :multiple="item.multiple || false "
                                        :collapse-tags="item.collapseTags || false"
                                        :filterable="item.filterable || true "
                                        :style="`width:${item.width ? item.width : 150}px;`"
                                        v-bind="item"
                                        @change="(val)=>{
                                            synchronous('change',item,val)
                                        }"
                                    >
                                        <el-option
                                            v-for="optItem in ownSearchConfig.selectLists[item.dataListName]"
                                            :key="optItem.value"
                                            :disabled="optItem.disabled || false "
                                            :label="optItem.label"
                                            :value="optItem.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                                <template v-else-if="item.type === 'date' ">
                                    <el-date-picker
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        v-bind="item"
                                        :type="item.dateType || 'date' "
                                        :placeholder="
                                            !item.dateType.includes('range') ? (item.placeholder || '请选择'+item.labelName) : ''
                                        "
                                        :start-placeholder="
                                            item.dateType.includes('range') ? item.startPlaceholder || '开始时间' : ''
                                        "
                                        :end-placeholder="
                                            item.dateType.includes('range') ? item.endPlaceholder || '结束时间' : ''
                                        "
                                        :format="item.format || 'YYYY-MM-DD HH:mm:ss' "
                                        :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss' "
                                        :range-separator="item.rangeSeparator || '至' "
                                        :picker-options="item.yearType === 'yearRange' ? pickerOptions : {}"
                                        :disabled-date="(date)=>{
                                            return item.disabledDate && item.disabledDate(item,date);
                                        }"
                                        :default-time="
                                            item.defaultTime ||
                                            (item.dateType.includes('range') ? [new Date(2000,1,1,8,30,0),new Date(2000,1,1,17,30,0)] : new Date(2000,1,1,8,30,0))
                                        "
                                        :style="`width:${item.width ? item.width : 280}px;`"
                                        @calendar-change="(val)=>{
                                            synchronous('calendarchange',item,val);
                                        }"
                                        @change="(val)=>{
                                            synchronous('change',item,val);
                                        }"
                                    ></el-date-picker>
                                </template>
                                <template v-else-if="item.type === 'cascader' ">
                                    <el-cascader
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :placeholder="item.placeholder || '请选择'+item.labelName "
                                        :options="ownSearchConfig.selectLists[item.dataListName] || [] "
                                        :props="item.cascaderProps"
                                        :style="`width:${item.width ? item.width : 180}px;`"
                                        v-bind="item"
                                    >
                                    </el-cascader>
                                </template>
                                <template v-else-if="item.type === 'slot' ">
                                    <slot :name="item.slotName" :data="{item}"></slot>
                                </template>
                            </el-form-item>
                        </template>
                    </div>
                </el-collapse-transition>
            </template>
            <el-form-item class="qilin-form-search-btn">
                <template v-for="(item,index) in ownSearchConfig.buttonConfig">
                    <el-button
                        :type="item.type || 'primary' "
                        :size="item.size || 'default' "
                        :class="item.className"
                        @click="item.click && item.click(item.formRefName) "
                        v-bind="item"
                    >{{item.btnName || "按钮"}}</el-button>
                </template>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 是否显示更多变量
const showMore=ref(false);
// 获取当前搜索表单元素DOM
let formData=ref(null);


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    searchConfig:{
        type:Object,
        default(){
            return {
                // 更多配置项扩展
                moreConfig:{
                    isShowMore:false, //是否显示展开收缩功能，默认不显示
                },
                // el-form表单元素的相关配置
                elFormConfig:{
                    refName:"formSearch", //el-form的ref名称--默认formSearch
                    labelPosition:"right", //el-form的label对齐方式--默认right
                    labelSuffix:"：", //el-form的label后缀--默认为：
                    size:"default" //el-form的表单大小--默认small
                },
                // 搜索表单结构相关配置项
                itemConfig:[
                    {
                        dataName:"name", //对应后台数据名
                        labelName:"", //label文字名称
                        className:"", //el-form-item元素的自定义类名
                        type:"input", //表单输入类型--默认为input
                        dataListName:"", //拉数据名对应selectLists中属性--当type为select时生效
                        slotName:"", //slot元素name名称，仅当type为slot时生效
                        inputType:"text", //表单input类型--默认为text--仅当type为input时生效
                        prefixIcon:"", //输入框前置内置图标
                        prefixSlotName:"", //输入框前置内置图标插槽名称
                        suffixIcon:"", //输入框后置内置图标
                        suffixSlotName:"", //输入框后置内置图标插槽名称
                        className:"", //el-form-item的自定义类名
                        clearable:true, //是否可以一键清空--默认true
                        disabled:false, //是否禁用--默认false
                        placeholder:"", //表单提示语
                        startPlaceholder:"", //日期开始提示语
                        endPlaceholder:"", //日期结束提示语
                        width:150, //元素宽度，不写默认为150px
                        disabledDate:"event", //设置禁用日期的方法，仅当type为date时生效
                        defaultTime:new Date(2000,1,1,8,30,0), // 当选择时间时默认选中的时分秒时刻，默认8点半
                    }
                ],
                // 展开时搜索表单结构配置项，同上一致
                moreItemConfig:[
                    {

                    }
                ],
                // 下拉列表数据配置
                selectLists:{},
                // 表单需要提交的数据配置
                submitData:{},
                // 搜索栏右侧按钮数据配置
                buttonConfig:[
                    {
                        btnName:"按钮", //按钮名称
                        type:"primary", //按钮类型
                        size:"small", //按钮大小
                        className:"", //按钮自定义类名
                        formRefName:"", //表单元素DOM
                        click:"event" //点击事件
                    }
                ]
            };
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:searchConfig",'synchronous']);

// 组件自身的配置项
let ownSearchConfig=computed({
    get(){
        return propsValue.searchConfig;
    },
    set(val){
        emits("update:searchConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 触发表单元素定义事件
const synchronous=(eventType,item,e,ref)=>{
    // console.log(eventType,item,e);
    item[eventType] && item[eventType](item,e);
};

// 重置表单事件监听
const resetSearchData=()=>{
    formData.value.resetFields();
    for(let key in ownSearchConfig.value.submitData){
        ownSearchConfig.value.submitData[key]="";
    };
};


/*
    生命周期等代码区域
*/
// 暴露子组件的方法
defineExpose({
    resetSearchData
});

</script>

<style lang="scss" scoped>
.qilin-QilinSearch{
    width:100%;
    .el-form--inline .el-form-item{
        margin-right:10px;
    }
    >.el-form{
        position:relative;
        overflow:hidden;
        >.qilin-QilinSearch-more{
            display:inline-block;
            margin-bottom:24px;
            color:$primary-text-color;
            cursor: pointer;
            vertical-align:middle;
        }
        >.qilin-QilinSearch-more-form{

        }
        >.qilin-form-search-btn{
            position:absolute;
            top:0;
            right:0;
        }
    }
}
</style>
